<template>
  <div class="annotation-container">
    <div class="svg-container">
      <svg ref="svgCanvas" width="800" height="600" 
           @mousedown="onMouseDown" 
           @mouseup="onMouseUp" 
           @mousemove="onMouseMove" 
           @click="handleClick"
           @wheel="handleWheel"
           style="background-color: white;">
        <image x="0" y="0" width="800" height="600" href="@/assets/vue.svg" />
      </svg>
    </div>
    <div class="controls">
      <button @click="selectShape('rect')">矩形</button>
      <button @click="selectShape('ellipse')">椭圆</button>
      <button @click="selectShape('polygon')">多边形</button>
      <button @click="clearSelection" :disabled="!selectedElement">清除选择</button>
      <button @click="cleanupAllResizeHandles">清理控制点</button>
      <button @click="debugResizeHandles">调试信息</button>
      <button @click="testResizeHandles" :disabled="!selectedElement">测试控制点</button>
      <button @click="debugDragState">调试拖拽状态</button>
      <button @click="cleanupInvalidElements">清理无效元素</button>
      <button @click="forceRestoreDragState">强制恢复拖拽</button>
      <button @click="testAllElementsDragState">测试拖拽状态</button>
      <button @click="checkHoverDragConsistency">检查一致性</button>
      <button @click="exitDrawingMode" :disabled="!drawingMode">退出绘制</button>
      <button @click="resetViewport">重置视口</button>
      <button @click="testPanning">测试拖动</button>
    </div>
    <div class="shortcuts-info">
      <p>🎨 快捷键：按住 <kbd>R</kbd> 绘制矩形，<kbd>E</kbd> 绘制椭圆，<kbd>P</kbd> 绘制多边形，<kbd>ESC</kbd> 退出绘制，<kbd>空格</kbd> 测试拖动</p>
      <p>🔍 操作：滚轮缩放，中键/右键拖动画布</p>
      <p>🎯 智能拖拽：移入元素时自动设置拖拽优先级，确保移入和拖拽的一致性</p>
      <p>📊 当前缩放：{{ Math.round(viewport.scale * 100) }}% | 位置：X:{{ Math.round(viewport.translateX) }}, Y:{{ Math.round(viewport.translateY) }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,watch,onUnmounted } from 'vue';
import polylabel from 'polylabel';
import SVG from 'svg.js';
import svgDraw from 'svg.draw.js';
// import * as svgResize from 'svg.resize.js';  // Modified import
import 'svg.draggable.js';
import 'svg.resize.js';
import 'svg.select.js';

// ==================== 响应式数据 ====================
const currentShape = ref('rect');        // 当前选择的绘制形状类型
const drawingMode = ref(false);          // 是否处于绘制模式
const drawing = ref(false);              // 是否正在绘制状态
const dragging = ref(false);             // 是否正在拖拽状态
const svgDoc = ref(null);                // SVG.js 文档对象
const currentElement = ref(null);        // 当前正在绘制的元素
const svgCanvas = ref(null);             // SVG DOM 引用
const startPoint = ref({ x: 0, y: 0 }); // 绘制起始点坐标
const selectedElement = ref(null);       // 当前选中的元素
const hoveredElement = ref(null);        // 当前悬停的元素
const allElements = ref([]);             // 所有已绘制的元素数组
const lastMousePos = ref({ x: 0, y: 0 }); // 上次鼠标位置（用于优化悬停检测）

// 缩放和拖动相关状态
const viewport = ref({
  scale: 1,
  translateX: 0,
  translateY: 0,
  isPanning: false,
  lastPanPoint: { x: 0, y: 0 },
  minScale: 0.1,
  maxScale: 10
});

watch(() =>allElements.value,() => {
  console.log(allElements.value);
  
},{deep:true})

// ==================== 工具函数 ====================

/**
 * 获取鼠标在SVG中的准确坐标
 * @param {MouseEvent} event - 鼠标事件对象
 * @returns {{x: number, y: number}} SVG坐标系中的坐标
 */
const getMousePosition = (event) => {
  // 添加安全检查
  if (!svgCanvas.value) {
    console.error('❌ svgCanvas 未初始化');
    return { x: 0, y: 0 };
  }
  
  try {
    const rect = svgCanvas.value.getBoundingClientRect();
    
    // 验证 rect 的有效性
    if (!rect || typeof rect.left !== 'number' || typeof rect.top !== 'number') {
      console.error('❌ 无效的 getBoundingClientRect 结果:', rect);
      return { x: 0, y: 0 };
    }
    
    // SVG.js 拖拽事件可能使用不同的事件对象格式
    let clientX, clientY;
    
    if (event.clientX !== undefined && event.clientY !== undefined) {
      // 标准 DOM 事件
      clientX = event.clientX;
      clientY = event.clientY;
    } else if (event.detail && event.detail.event) {
      // SVG.js 拖拽事件
      clientX = event.detail.event.clientX;
      clientY = event.detail.event.clientY;
    } else if (event.originalEvent) {
      // jQuery 事件
      clientX = event.originalEvent.clientX;
      clientY = event.originalEvent.clientY;
    } else {
      // 尝试其他可能的属性
      console.warn('⚠️ 无法获取鼠标坐标，尝试其他属性:', event);
      
      // 检查事件对象的所有属性
      for (let key in event) {
        if (key.includes('client') || key.includes('page') || key.includes('screen')) {
          console.log(`🔍 事件属性 ${key}:`, event[key]);
        }
      }
      
      // 如果都找不到，使用事件对象的其他坐标
      if (event.pageX !== undefined && event.pageY !== undefined) {
        clientX = event.pageX - window.pageXOffset;
        clientY = event.pageY - window.pageYOffset;
      } else {
        console.error('❌ 无法获取鼠标坐标');
        return { x: 0, y: 0 };
      }
    }
    
    // 考虑视口变换的坐标计算
    let x = clientX - rect.left;
    let y = clientY - rect.top;
    
    // 应用视口变换的逆变换
    x = (x - viewport.value.translateX) / viewport.value.scale;
    y = (y - viewport.value.translateY) / viewport.value.scale;
    
    // 验证计算结果
    if (isNaN(x) || isNaN(y)) {
      console.error('❌ 鼠标位置计算结果无效:', { 
        clientX, 
        clientY, 
        rectLeft: rect.left, 
        rectTop: rect.top,
        translateX: viewport.value.translateX,
        translateY: viewport.value.translateY,
        scale: viewport.value.scale,
        calculatedX: x,
        calculatedY: y
      });
      return { x: 0, y: 0 };
    }
    
    // console.log('📍 鼠标位置计算:', {
    //   clientX,
    //   clientY,
    //   rectLeft: rect.left,
    //   rectTop: rect.top,
    //   calculatedX: x,
    //   calculatedY: y,
    //   eventType: event.type,
    //   eventKeys: Object.keys(event)
    // });
    
    return { x, y };
  } catch (error) {
    console.error('❌ 获取鼠标位置时出错:', error);
    return { x: 0, y: 0 };
  }
};

/**
 * 获取元素的默认描边颜色
 * @param {Object} element - SVG元素对象
 * @returns {string} 颜色值
 */
const getDefaultStroke = (element) => {
  const type = element.type;
  if (type === 'rect') return 'blue';
  if (type === 'ellipse') return 'green';
  if (type === 'polygon') return 'red';
  return 'black';
};

/**
 * 获取元素的默认填充颜色
 * @param {Object} element - SVG元素对象
 * @returns {string} 颜色值
 */
const getDefaultFill = (element) => {
  const type = element.type;
  if (type === 'rect') return 'rgba(0, 0, 255, 0.1)';
  if (type === 'ellipse') return 'rgba(0, 128, 0, 0.1)';
  if (type === 'polygon') return 'rgba(255, 0, 0, 0.1)';
  return 'rgba(0, 0, 0, 0.1)';
};

// ==================== SVG.js插件验证 ====================

/**
 * 验证SVG.js插件是否正确加载
 */
const validateSVGPlugins = () => {
  console.log('🔍 验证SVG.js插件加载状态...');
  
  // 检查SVG.js核心
  if (typeof SVG !== 'undefined') {
    console.log('✅ SVG.js 核心已加载');
    
    // 检查draggable插件
    if (SVG.Element.prototype.draggable) {
      console.log('✅ SVG.js draggable 插件已加载');
      console.log('draggable方法:', typeof SVG.Element.prototype.draggable);
    } else {
      console.error('❌ SVG.js draggable 插件未加载');
    }
    
    // 检查resize插件
    if (SVG.Element.prototype.resize) {
      console.log('✅ SVG.js resize 插件已加载');
    } else {
      console.error('❌ SVG.js resize 插件未加载');
    }
    
    // 检查select插件
    if (SVG.Element.prototype.select) {
      console.log('✅ SVG.js select 插件已加载');
    } else {
      console.error('❌ SVG.js select 插件未加载');
    }
    
    // 检查draw插件
    if (SVG.Element.prototype.draw) {
      console.log('✅ SVG.js draw 插件已加载');
    } else {
      console.error('❌ SVG.js draw 插件未加载');
    }
  } else {
    console.error('❌ SVG.js 核心未加载');
  }
  
  // 检查全局对象
  console.log('全局SVG对象:', window.SVG);
  console.log('SVG.Element原型:', SVG.Element.prototype);
};

// ==================== 拖拽状态管理 ====================

/**
 * 为悬停的元素预先准备拖拽状态，确保移入和拖拽的一致性
 * @param {Object} element - 要准备拖拽的元素
 */
const prepareElementForDrag = (element) => {
  // 安全检查：确保元素存在且有效
  if (!element) {
    console.warn('⚠️ prepareElementForDrag: element 为 null 或 undefined');
    return;
  }
  
  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn('⚠️ prepareElementForDrag: element.node 为 null，元素可能已被删除');
    return;
  }
  
  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn('⚠️ prepareElementForDrag: 元素已不在DOM中');
    return;
  }
  
  // 重要：移入时只做预览，不改变拖拽状态
  // 拖拽状态只在按住拖动时设置
  console.log('🎯 悬停预览元素:', element.type, '(不改变拖拽状态)');
};

/**
 * 清理无效元素，移除已被删除的元素
 */
const cleanupInvalidElements = () => {
  const validElements = allElements.value.filter(el => {
    if (!el || !el.node || !document.contains(el.node)) {
      console.log('🧹 清理无效元素:', el);
      return false;
    }
    return true;
  });
  
  if (validElements.length !== allElements.value.length) {
    console.log(`🧹 清理了 ${allElements.value.length - validElements.length} 个无效元素`);
    allElements.value = validElements;
  }
};

/**
 * 强制恢复所有元素的拖拽状态（用于调试）
 */
const forceRestoreDragState = () => {
  console.log('🔧 强制恢复拖拽状态');
  
  // 先清理无效元素
  cleanupInvalidElements();
  
  allElements.value.forEach((el, index) => {
    // 安全检查：确保元素有效
    if (!el || !el.node || !document.contains(el.node)) {
      console.warn('⚠️ forceRestoreDragState: 跳过无效元素', index);
      return;
    }
    
    // 强制恢复拖拽功能
    try {
      if (typeof el.draggable === 'function') {
        el.draggable();
        console.log(`✅ 强制恢复元素拖拽 ${index}:`, el.type, 'ID:', el.data('elementId'));
      } else {
        console.warn(`⚠️ 元素没有draggable方法 ${index}:`, el.type, 'ID:', el.data('elementId'));
      }
    } catch (error) {
      console.error(`❌ 恢复拖拽时出错 ${index}:`, error);
    }
    
    // 清除拖拽优先级标记
    el.data('dragPriority', false);
  });
  
  console.log('🔧 强制恢复拖拽状态完成');
};

/**
 * 测试所有元素的拖拽状态
 */
const testAllElementsDragState = () => {
  console.log('🧪 测试所有元素的拖拽状态');
  
  allElements.value.forEach((el, index) => {
    if (!el || !el.node || !document.contains(el.node)) {
      console.log(`❌ 元素 ${index}: 无效元素`);
      return;
    }
    
    const hasDraggableMethod = typeof el.draggable === 'function';
    const isDraggable = !!el.draggable;
    const dragPriority = el.data('dragPriority');
    
    console.log(`元素 ${index}: 类型=${el.type}, ID=${el.data('elementId')}, 有拖拽方法=${hasDraggableMethod}, 可拖拽=${isDraggable}, 拖拽优先级=${dragPriority}`);
  });
};

/**
 * 检查悬停和拖拽元素的一致性
 */
const checkHoverDragConsistency = () => {
  console.log('🔍 检查悬停和拖拽元素的一致性');
  
  if (hoveredElement.value) {
    console.log('当前悬停元素:', {
      type: hoveredElement.value.type,
      ID: hoveredElement.value.data('elementId'),
      stroke: hoveredElement.value.attr('stroke'),
      fill: hoveredElement.value.attr('fill')
    });
  } else {
    console.log('当前悬停元素: 无');
  }
  
  if (selectedElement.value) {
    console.log('当前选中元素:', {
      type: selectedElement.value.type,
      ID: selectedElement.value.data('elementId'),
      stroke: selectedElement.value.attr('stroke'),
      fill: selectedElement.value.data('fill')
    });
  } else {
    console.log('当前选中元素: 无');
  }
  
  if (dragging.value) {
    console.log('拖拽状态: 正在拖拽');
  } else {
    console.log('拖拽状态: 未拖拽');
  }
  
  // 检查是否有不一致的情况
  if (hoveredElement.value && selectedElement.value && hoveredElement.value !== selectedElement.value) {
    console.log('⚠️ 警告：悬停元素与选中元素不一致！');
    console.log('这可能导致拖拽时选择错误的元素');
  }
};

/**
 * 恢复所有元素的正常拖拽状态
 */
const restoreNormalDragState = () => {
  // 先清理无效元素
  cleanupInvalidElements();
  
  allElements.value.forEach(el => {
    // 安全检查：确保元素有效
    if (!el || !el.node || !document.contains(el.node)) {
      console.warn('⚠️ restoreNormalDragState: 跳过无效元素');
      return;
    }
    
    // 强制恢复所有元素的拖拽功能
    try {
      // 无论当前状态如何，都强制重新启用拖拽
      el.draggable();
      console.log('✅ 强制恢复元素拖拽:', el.type);
    } catch (error) {
      console.error('❌ 恢复拖拽时出错:', error);
    }
    
    // 清除拖拽优先级标记
    el.data('dragPriority', false);
  });
  
  console.log('🔄 已恢复所有元素的正常拖拽状态');
};

// ==================== 简化的控制点系统 ====================

/**
 * 为元素添加调整大小的控制点
 * @param {Object} element - SVG元素对象
 */
const addResizeHandles = (element) => {
  // 安全检查：确保元素存在且有效
  if (!element) {
    console.warn('⚠️ addResizeHandles: element 为 null 或 undefined');
    return;
  }
  
  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn('⚠️ addResizeHandles: element.node 为 null，元素可能已被删除');
    return;
  }
  
  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn('⚠️ addResizeHandles: 元素已不在DOM中');
    return;
  }
  
  // debugger
  // 先清除之前的控制点
  hideResizeHandles(element);

  
  
  // 检查是否已经有控制点
  if (element.data('resizeHandlesCount')) {
    console.log('元素已有控制点，跳过创建');
    return;
  }
  
  const type = element.type;
  let bbox;
  
  if (type === 'rect') {
    bbox = {
      x: element.x(),
      y: element.y(),
      width: element.width(),
      height: element.height()
    };
  } else if (type === 'ellipse') {
    const cx = element.cx();
    const cy = element.cy();
    const rx = element.rx();
    const ry = element.ry();
    bbox = {
      x: cx - rx,
      y: cy - ry,
      width: rx * 2,
      height: ry * 2
    };
  } else if (type === 'polygon') {
    const points = element.array();
    let minX = points[0], maxX = points[0];
    let minY = points[1], maxY = points[1];
    
    for (let i = 0; i < points.length; i += 2) {
      minX = Math.min(minX, points[i]);
      maxX = Math.max(maxX, points[i]);
      minY = Math.min(minY, points[i + 1]);
      maxY = Math.max(maxY, points[i + 1]);
    }
    
    bbox = {
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY
    };
  }
  
  if (!bbox) return;
  
  // 创建8个控制点
  const handles = [];
  const handleSize = 6;
  
  // 角落控制点
  const corners = [
    { x: bbox.x, y: bbox.y, cursor: 'nw-resize', class: 'nw' },
    { x: bbox.x + bbox.width, y: bbox.y, cursor: 'ne-resize', class: 'ne' },
    { x: bbox.x, y: bbox.y + bbox.height, cursor: 'sw-resize', class: 'sw' },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height, cursor: 'se-resize', class: 'se' }
  ];
  
  // 边缘控制点
  const edges = [
    { x: bbox.x + bbox.width / 2, y: bbox.y, cursor: 'n-resize', class: 'n' },
    { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height, cursor: 's-resize', class: 's' },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height / 2, cursor: 'e-resize', class: 'e' },
    { x: bbox.x, y: bbox.y + bbox.height / 2, cursor: 'w-resize', class: 'w' }
  ];
  
  // 获取元素ID，避免在闭包中引用element对象
  const elementId = element.data('elementId');
  console.log('hideResizeHandles33');
  [...corners, ...edges].forEach((pos, index) => {
    const handle = svgDoc.value.rect(handleSize, handleSize)
      .attr({
        x: pos.x - handleSize / 2,
        y: pos.y - handleSize / 2,
        fill: '#ffffff',
        stroke: '#666666',
        strokeWidth: 1
      })
      .style('cursor', pos.cursor)
      .draggable();
    
    // 使用正确的事件名称绑定拖拽事件
    handle.on('dragstart', function(event) {
      console.log('🎯 控制点拖拽开始:', pos.class);
      console.log('🔍 拖拽开始事件对象:', {
        type: event.type,
        keys: Object.keys(event),
        detail: event.detail,
        originalEvent: event.originalEvent
      });
      
      // 阻止事件冒泡和默认行为
      if (event.stopPropagation) event.stopPropagation();
      if (event.preventDefault) event.preventDefault();
      
      dragging.value = true;
      
      // 重新获取当前元素的边界框，确保数据是最新的
      let currentBbox;
      if (element.type === 'rect') {
        currentBbox = {
          x: element.x(),
          y: element.y(),
          width: element.width(),
          height: element.height()
        };
      } else if (element.type === 'ellipse') {
        const cx = element.cx();
        const cy = element.cy();
        const rx = element.rx();
        const ry = element.ry();
        currentBbox = {
          x: cx - rx,
          y: cy - ry,
          width: rx * 2,
          height: ry * 2
        };
      }
      
      // 存储开始时的边界框和鼠标位置
      this.data('startBbox', currentBbox);
      this.data('startMousePos', getMousePosition(event));
      this.data('handleClass', pos.class);
      this.data('elementId', elementId);
      
      console.log('🎯 开始拖拽控制点:', {
        handleClass: pos.class,
        startBbox: currentBbox,
        startMousePos: getMousePosition(event),
        elementId: elementId
      });
    });
    
    handle.on('dragmove', function(event) {
      // 使用 requestAnimationFrame 优化性能，减少日志输出
      if (this._dragFrame) {
        cancelAnimationFrame(this._dragFrame);
      }
      
      this._dragFrame = requestAnimationFrame(() => {
        // 阻止事件冒泡和默认行为
        if (event.stopPropagation) event.stopPropagation();
        if (event.preventDefault) event.preventDefault();
        
        const startBbox = this.data('startBbox');
        const startMousePos = this.data('startMousePos');
        const handleClass = this.data('handleClass');
        const currentElementId = this.data('elementId');
        const currentMousePos = getMousePosition(event);
        
        // 验证数据有效性
        if (!startBbox || !startMousePos || !currentMousePos) {
          return;
        }
        
        // 验证鼠标位置数据的有效性
        if (typeof startMousePos.x !== 'number' || typeof startMousePos.y !== 'number' ||
            typeof currentMousePos.x !== 'number' || typeof currentMousePos.y !== 'number') {
          return;
        }
        
        // 验证鼠标位置数据是否为 NaN
        if (isNaN(startMousePos.x) || isNaN(startMousePos.y) ||
            isNaN(currentMousePos.x) || isNaN(currentMousePos.y)) {
          return;
        }
        
        // 计算鼠标移动的距离
        const deltaX = currentMousePos.x - startMousePos.x;
        const deltaY = currentMousePos.y - startMousePos.y;
        
        // 验证增量值的有效性
        if (isNaN(deltaX) || isNaN(deltaY)) {
          return;
        }
        
        // 调用缩放函数
        if (currentElementId) {
          const targetElement = allElements.value.find(el => el.data('elementId') === currentElementId);
          if (targetElement) {
            resizeElement(targetElement, handleClass, startBbox, deltaX, deltaY);
          }
        }
      });
    });
    
    handle.on('dragend', function(event) {
      console.log('🎯 控制点拖拽结束:', pos.class);
      
      // 阻止事件冒泡和默认行为
      if (event.stopPropagation) event.stopPropagation();
      if (event.preventDefault) event.preventDefault();
      
      dragging.value = false;
    });
    
    // 为控制点添加特殊标识，防止被误选
    handle.addClass('resize-handle');
    handle.data('isResizeHandle', true);
    
    handles.push(handle);
  });
  
  // 安全地存储控制点引用，避免循环引用
  // 不直接存储handles数组，而是存储控制点的位置信息
  const handlePositions = handles.map(handle => ({
    x: handle.x(),
    y: handle.y(),
    class: handle.data('handleClass')
  }));
  // 安全地存储控制点信息，避免循环引用
  // 只存储必要的信息，不存储SVG.js对象
  element.data('resizeHandlesCount', handles.length);
  element.data('bbox', {
    x: bbox.x,
    y: bbox.y,
    width: bbox.width,
    height: bbox.height
  });
  
  // 为每个控制点添加唯一标识，方便后续查找
  handles.forEach((handle, index) => {
    // 使用SVG.js的attr方法设置属性
    handle.attr('data-handle-index', index);
    handle.attr('data-element-id', element.data('elementId'));
  });
  
  // 将控制点存储到全局管理器中，避免循环引用
  if (!window.resizeHandlesManager) {
    window.resizeHandlesManager = new Map();
  }
  window.resizeHandlesManager.set(element.data('elementId'), handles);
};

/**
 * 调整元素大小
 * @param {Object} element - SVG元素对象
 * @param {string} handleClass - 控制点类型
 * @param {Object} startBbox - 开始时的边界框
 * @param {number} deltaX - X方向变化量
 * @param {number} deltaY - Y方向变化量
 */
const resizeElement = (element, handleClass, startBbox, deltaX, deltaY) => {
  // 验证输入数据的有效性
  if (!startBbox || typeof startBbox.x !== 'number' || typeof startBbox.y !== 'number' || 
      typeof startBbox.width !== 'number' || typeof startBbox.height !== 'number') {
    return;
  }
  
  if (typeof deltaX !== 'number' || typeof deltaY !== 'number') {
    return;
  }
  
  // 验证起始边界框的有效性
  if (startBbox.width <= 0 || startBbox.height <= 0) {
    return;
  }
  
  const type = element.type;
  let newBbox = { ...startBbox };
  
  // 根据控制点类型计算新的边界框
  switch (handleClass) {
    case 'nw': // 西北角 - 左上角拖拽
      newBbox.x = startBbox.x + deltaX;
      newBbox.y = startBbox.y + deltaY;
      newBbox.width = startBbox.width - deltaX;
      newBbox.height = startBbox.height - deltaY;
      break;
    case 'ne': // 东北角 - 右上角拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y + deltaY;
      newBbox.width = startBbox.width + deltaX;
      newBbox.height = startBbox.height - deltaY;
      break;
    case 'sw': // 西南角 - 左下角拖拽
      newBbox.x = startBbox.x + deltaX;
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width - deltaX;
      newBbox.height = startBbox.height + deltaY;
      break;
    case 'se': // 东南角 - 右下角拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width + deltaX;
      newBbox.height = startBbox.height + deltaY;
      break;
    case 'n': // 北边 - 上边拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y + deltaY;
      newBbox.width = startBbox.width; // 宽度不变
      newBbox.height = startBbox.height - deltaY;
      break;
    case 's': // 南边 - 下边拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width; // 宽度不变
      newBbox.height = startBbox.height + deltaY;
      break;
    case 'e': // 东边 - 右边拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width + deltaX;
      newBbox.height = startBbox.height; // 高度不变
      break;
    case 'w': // 西边 - 左边拖拽
      newBbox.x = startBbox.x + deltaX;
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width - deltaX;
      newBbox.height = startBbox.height; // 高度不变
      break;
    default:
      return;
  }
  
  // 验证计算结果的有效性
  if (isNaN(newBbox.x) || isNaN(newBbox.y) || isNaN(newBbox.width) || isNaN(newBbox.height)) {
    return;
  }
  
  // 确保最小尺寸和位置约束
  if (newBbox.width < 10) {
    if (handleClass === 'nw' || handleClass === 'sw') {
      newBbox.x = startBbox.x + startBbox.width - 10;
    }
    newBbox.width = 10;
  }
  if (newBbox.height < 10) {
    if (handleClass === 'nw' || handleClass === 'ne') {
      newBbox.y = startBbox.y + startBbox.height - 10;
    }
    newBbox.height = 10;
  }
  
  // 确保最小尺寸
  newBbox.width = Math.max(10, newBbox.width);
  newBbox.height = Math.max(10, newBbox.height);
  
  // 更新元素属性
  if (type === 'rect') {
    console.log('更新矩形属性:', {
      x: newBbox.x,
      y: newBbox.y,
      width: newBbox.width,
      height: newBbox.height
    });
    
    element.attr({
      x: newBbox.x,
      y: newBbox.y,
      width: newBbox.width,
      height: newBbox.height
    });
    
    // 验证更新是否成功
    console.log('更新后的矩形属性:', {
      x: element.x(),
      y: element.y(),
      width: element.width(),
      height: element.height()
    });
  } else if (type === 'ellipse') {
    element.attr({
      cx: newBbox.x + newBbox.width / 2,
      cy: newBbox.y + newBbox.height / 2,
      rx: newBbox.width / 2,
      ry: newBbox.height / 2
    });
  } else if (type === 'polygon') {
    const centerX = newBbox.x + newBbox.width / 2;
    const centerY = newBbox.y + newBbox.height / 2;
    const halfWidth = newBbox.width / 2;
    const halfHeight = newBbox.height / 2;
    
    element.plot([
      centerX, centerY - halfHeight,
      centerX + halfWidth, centerY + halfHeight,
      centerX - halfWidth, centerY + halfHeight
    ]);
  }
  
  // 立即更新控制点位置，确保同步
  try {
    // 重新计算实际的边界框（基于更新后的元素属性）
    let actualBbox = newBbox;
    if (type === 'rect') {
      actualBbox = {
        x: element.x(),
        y: element.y(),
        width: element.width(),
        height: element.height()
      };
    } else if (type === 'ellipse') {
      const cx = element.cx();
      const cy = element.cy();
      const rx = element.rx();
      const ry = element.ry();
      actualBbox = {
        x: cx - rx,
        y: cy - ry,
        width: rx * 2,
        height: ry * 2
      };
    }
    
    console.log('🔄 更新控制点位置:', {
      type: type,
      newBbox: newBbox,
      actualBbox: actualBbox
    });
    
    // 立即更新控制点位置
    updateResizeHandles(element, actualBbox);
    
    // 同时更新元素的边界框数据
    element.data('bbox', actualBbox);
    
  } catch (error) {
    console.error('❌ 更新控制点位置时出错:', error);
  }
};

/**
 * 更新调整大小控制点的位置
 * @param {Object} element - SVG元素对象
 * @param {Object} bbox - 新的边界框
 */
const updateResizeHandles = (element, bbox) => {
  // 从全局管理器获取控制点
  const handles = window.resizeHandlesManager?.get(element.data('elementId'));
  if (!handles || handles.length === 0) return;
  
  const handleSize = 6;
  
  // 确保边界框数据有效
  if (!bbox || typeof bbox.x !== 'number' || typeof bbox.y !== 'number' || 
      typeof bbox.width !== 'number' || typeof bbox.height !== 'number') {
    console.warn('无效的边界框数据:', bbox);
    return;
  }
  
  // 更新角落控制点
  const corners = [
    { x: bbox.x, y: bbox.y, class: 'nw' },
    { x: bbox.x + bbox.width, y: bbox.y, class: 'ne' },
    { x: bbox.x, y: bbox.y + bbox.height, class: 'sw' },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height, class: 'se' }
  ];
  
  // 更新边缘控制点
  const edges = [
    { x: bbox.x + bbox.width / 2, y: bbox.y, class: 'n' },
    { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height, class: 's' },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height / 2, class: 'e' },
    { x: bbox.x, y: bbox.y + bbox.height / 2, class: 'w' }
  ];
  
  [...corners, ...edges].forEach((pos, index) => {
    if (handles[index]) {
      try {
        // 确保位置数据有效
        if (typeof pos.x === 'number' && typeof pos.y === 'number') {
          // 使用SVG.js的attr方法设置位置
          handles[index].attr({
            x: pos.x - handleSize / 2,
            y: pos.y - handleSize / 2
          });
        }
      } catch (error) {
        console.warn('更新控制点位置时出错:', error);
      }
    }
  });
};

/**
 * 安全地更新控制点位置
 * @param {Object} element - SVG元素对象
 */
const safeUpdateResizeHandlesPosition = (element) => {
  if (!element) {
    console.warn('⚠️ safeUpdateResizeHandlesPosition: element 为 null 或 undefined');
    return;
  }
  updateResizeHandlesPosition(element);
};

/**
 * 实时更新控制点位置，跟随元素移动
 * @param {Object} element - SVG元素对象
 */
const updateResizeHandlesPosition = (element) => {
  // 添加空值检查
  if (!element) {
    console.warn('⚠️ updateResizeHandlesPosition: element 为 null 或 undefined');
    return;
  }
  
  // 检查元素是否有控制点（通过计数而不是对象引用）
  const handleCount = element.data('resizeHandlesCount');
  if (!handleCount || handleCount === 0) return;
  
  const type = element.type;
  let bbox;
  
  // 获取元素的当前边界框
  if (type === 'rect') {
    bbox = {
      x: element.x(),
      y: element.y(),
      width: element.width(),
      height: element.height()
    };
  } else if (type === 'ellipse') {
    const cx = element.cx();
    const cy = element.cy();
    const rx = element.rx();
    const ry = element.ry();
    bbox = {
      x: cx - rx,
      y: cy - ry,
      width: rx * 2,
      height: ry * 2
    };
  } else if (type === 'polygon') {
    const points = element.array();
    let minX = points[0], maxX = points[0];
    let minY = points[1], maxY = points[1];
    
    for (let i = 0; i < points.length; i += 2) {
      minX = Math.min(minX, points[i]);
      maxX = Math.max(maxX, points[i]);
      minY = Math.min(minY, points[i + 1]);
      maxY = Math.max(maxY, points[i + 1]);
    }
    
    bbox = {
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY
    };
  }
  
  if (!bbox) return;
  
  // 更新控制点位置
  updateResizeHandles(element, bbox);
  
  // 安全地更新存储的边界框数据，避免循环引用
  element.data('bbox', {
    x: bbox.x,
    y: bbox.y,
    width: bbox.width,
    height: bbox.height
  });
  
  // 考虑视口变换，确保控制点位置正确
  if (viewport.value.scale !== 1 || viewport.value.translateX !== 0 || viewport.value.translateY !== 0) {
    console.log('🔍 视口变换下更新控制点:', { scale: viewport.value.scale, translateX: viewport.value.translateX, translateY: viewport.value.translateY });
  }
};

/**
 * 隐藏元素的所有调整大小控制点
 * @param {Object} element - SVG元素对象
 */
const hideResizeHandles = (element) => {
  // 从全局管理器获取控制点
  const handles = window.resizeHandlesManager?.get(element.data('elementId'));
  if (!handles) return;
  
  // 强制移除所有控制点
  handles.forEach(handle => {
    try {
      // 先移除拖拽功能
      if (handle.draggable) {
        handle.draggable(false);
      }
      // 再移除元素
      if (handle.remove) {
        handle.remove();
      }
    } catch (error) {
      console.warn('移除控制点时出错:', error);
    }
  });
  
  // 从全局管理器中移除
  window.resizeHandlesManager.delete(element.data('elementId'));
  
  // 清除数据引用
  element.data('resizeHandlesCount', null);
  element.data('bbox', null);
};

/**
 * 清理所有残留的控制点（全局清理）
 */
const cleanupAllResizeHandles = () => {
  // 清理全局管理器中的所有控制点
  if (window.resizeHandlesManager) {
    window.resizeHandlesManager.forEach((handles, elementId) => {
      handles.forEach(handle => {
        try {
          if (handle.draggable) {
            handle.draggable(false);
          }
          if (handle.remove) {
            handle.remove();
          }
        } catch (error) {
          console.warn('清理控制点时出错:', error);
        }
      });
    });
    window.resizeHandlesManager.clear();
  }
  
  // 清理所有元素的数据
  allElements.value.forEach(element => {
    element.data('resizeHandlesCount', null);
    element.data('bbox', null);
  });
  
  console.log('✅ 已清理所有控制点');
};

/**
 * 显示元素的所有调整大小控制点
 * @param {Object} element - SVG元素对象
 */
const showResizeHandles = (element) => {
  // 安全检查：确保元素存在且有效
  if (!element) {
    console.warn('⚠️ showResizeHandles: element 为 null 或 undefined');
    return;
  }
  
  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn('⚠️ showResizeHandles: element.node 为 null，元素可能已被删除');
    return;
  }
  
  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn('⚠️ showResizeHandles: 元素已不在DOM中');
    return;
  }
  
  // 确保元素有类型属性
  if (!element.type) {
    console.warn('元素缺少类型属性，无法显示控制点');
    return;
  }
  
  // 检查是否已经有控制点
  if (element.data('resizeHandlesCount')) {
    console.log('元素已有控制点，跳过创建');
    return;
  }
  
  // 添加控制点
  addResizeHandles(element);
  
  // 确保控制点在最上层
  const handles = window.resizeHandlesManager?.get(element.data('elementId'));
  if (handles) {
    handles.forEach(handle => {
      if (handle && handle.front) {
        handle.front();
      }
    });
  }
};

// ==================== 形状绘制功能 ====================

/**
 * 选择要绘制的形状类型
 * @param {string} shape - 形状类型：'rect', 'ellipse', 'polygon'
 */
const selectShape = (shape) => {
  currentShape.value = shape;
  drawingMode.value = true; // 进入绘制模式
  clearSelection(); // 切换形状时清除选择
};

/**
 * 开始绘制流程
 * @param {MouseEvent} event - 鼠标按下事件
 */
const startDrawing = (event) => {
  // 只有在绘制模式下才允许绘制
  if (!drawingMode.value) {
    return;
  }
  
  const pos = getMousePosition(event);
  startPoint.value = pos;
  
  switch (currentShape.value) {
    case 'rect':
      startRectDrawing(pos);
      break;
    case 'ellipse':
      startEllipseDrawing(pos);
      break;
    case 'polygon':
      startPolygonDrawing(pos);
      break;
  }
};

/**
 * 开始绘制矩形
 * @param {{x: number, y: number}} pos - 起始坐标
 */
const startRectDrawing = (pos) => {
  currentElement.value = svgDoc.value.rect(0, 0).attr({
    x: pos.x,
    y: pos.y,
    fill: 'rgba(0, 0, 255, 0.1)', // 极淡的蓝色填充，用于点击检测
        stroke: 'blue',
        strokeWidth: 2
  }).draggable().style('cursor', 'move');  // 恢复拖拽功能
  
  // 使用闭包捕获元素引用，避免引用被清空的 currentElement.value
  const element = currentElement.value;
  
  // 使用正确的事件名称绑定拖拽事件
  element.on('dragstart', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragstart: 元素为 null');
      return;
    }
    
    // 重要：优先选择悬停的元素进行拖拽
    let targetElement = element;
    
    // 检查是否有悬停的元素，如果有，优先选择悬停的元素
    if (hoveredElement.value) {
      console.log('🎯 检测到悬停元素，优先选择悬停元素进行拖拽');
      console.log('悬停元素:', hoveredElement.value.type, 'ID:', hoveredElement.value.data('elementId'));
      console.log('当前拖拽元素:', element.type, 'ID:', element.data('elementId'));
      
      // 如果悬停的元素与当前拖拽的元素不同，切换到悬停的元素
      if (hoveredElement.value !== element) {
        console.log('🔄 切换到悬停的元素进行拖拽');
        // 先选中悬停的元素
        selectElement(hoveredElement.value);
        targetElement = hoveredElement.value;
      } else {
        console.log('✅ 悬停元素与拖拽元素一致，无需切换');
      }
    } else {
      console.log('ℹ️ 没有悬停元素，使用当前拖拽元素');
    }
    
    // 拖拽开始时，检查当前元素是否被选中
    if (selectedElement.value === targetElement) {
      console.log('✅ dragstart: 拖拽已选中的元素，正常开始拖拽');
    } else {
      // 如果拖拽的不是当前选中的元素，先选中它
      console.log('🎯 dragstart: 拖拽未选中的元素，先选中它');
      selectElement(targetElement);
    }
    
    // 重要：将悬停元素保存到拖拽状态中，防止拖拽过程中丢失
    if (hoveredElement.value && hoveredElement.value === targetElement) {
      targetElement.data('dragFromHover', true);
      console.log('💾 保存悬停状态到拖拽元素');
    }
    
    // 为拖拽中的元素添加特殊的拖拽样式
    targetElement.attr({
      'stroke-width': 4,
      'stroke': '#ff0000', // 红色边框表示正在拖拽
      'stroke-dasharray': '8,4', // 虚线边框
      'fill-opacity': 0.6 // 增加填充透明度
    });
    
    // 设置拖拽状态
    dragging.value = true;
    
    // 重要：拖拽开始时，禁用其他所有元素的拖拽，确保拖拽的一致性
    console.log('🔒 拖拽开始，禁用其他元素拖拽');
    console.log('当前拖拽元素:', targetElement.type, 'ID:', targetElement.data('elementId'));
    console.log('所有元素数量:', allElements.value.length);
    
    allElements.value.forEach((el, index) => {
      // 安全检查：确保元素有效
      if (!el || !el.node || !document.contains(el.node)) {
        console.warn('⚠️ dragstart: 跳过无效元素', index);
        return;
      }
      
      console.log(`元素 ${index}: 类型=${el.type}, ID=${el.data('elementId')}, 是否当前元素=${el === targetElement}`);
      
      if (el !== targetElement) {
        // 禁用其他所有元素的拖拽
        if (el.draggable) {
          el.draggable(false);
          console.log('❌ 禁用元素拖拽:', el.type, 'ID:', el.data('elementId'));
        } else {
          console.log('⚠️ 元素拖拽已禁用:', el.type, 'ID:', el.data('elementId'));
        }
      } else {
        console.log('✅ 保持当前元素拖拽:', el.type, 'ID:', el.data('elementId'));
      }
    });
  });
  
  element.on('dragmove', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragmove: 元素为 null');
      return;
    }
    
    // 拖拽过程中，始终更新当前选中元素的位置
    // 因为拖拽开始时可能已经切换了选中的元素
    if (selectedElement.value) {
      updateResizeHandlesPosition(selectedElement.value);
    }
  });
  
  element.on('dragend', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragend: 元素为 null');
      return;
    }
    
    dragging.value = false;
    // 拖拽结束后确保控制点位置完全同步
    if (selectedElement.value === element) {
      updateResizeHandlesPosition(element);
    }
    // 拖拽结束后，确保当前拖拽的元素被选中
    if (selectedElement.value !== element) {
      selectElement(element);
    }
    
    // 恢复元素的正常选中样式
    if (selectedElement.value === element) {
      selectedElement.value.attr({
        'stroke': '#ff6b6b',
        'stroke-width': 3,
        'stroke-dasharray': '5,5',
        'fill-opacity': 0.2
      });
    }
    
    // 拖拽结束后，恢复所有元素的正常拖拽状态
    restoreNormalDragState();
    
    // 拖拽结束后，重新启用悬停预览功能
    // 这样可以恢复正常的交互体验
  });
  
  // 设置元素类型并添加到列表
  currentElement.value.type = 'rect';
  currentElement.value.data('elementId', `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`);
  
  allElements.value.push(currentElement.value);
  console.log('allElements.value--',allElements.value);
  
  drawing.value = true;
};

/**
 * 开始绘制椭圆
 * @param {{x: number, y: number}} pos - 起始坐标
 */
const startEllipseDrawing = (pos) => {
  currentElement.value = svgDoc.value.ellipse(0, 0).attr({
    cx: pos.x,
    cy: pos.y,
    fill: 'rgba(0, 128, 0, 0.1)', // 极淡的绿色填充，用于点击检测
        stroke: 'green',
        strokeWidth: 2
  }).draggable().style('cursor', 'move');  // 恢复拖拽功能
  
  // 使用闭包捕获元素引用，避免引用被清空的 currentElement.value
  const element = currentElement.value;
  
  // 使用正确的事件名称绑定拖拽事件
  element.on('dragstart', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragstart: 元素为 null');
      return;
    }
    
    // 重要：优先选择悬停的元素进行拖拽
    let targetElement = element;
    
    // 检查是否有悬停的元素，如果有，优先选择悬停的元素
    if (hoveredElement.value) {
      console.log('🎯 检测到悬停元素，优先选择悬停元素进行拖拽');
      console.log('悬停元素:', hoveredElement.value.type, 'ID:', hoveredElement.value.data('elementId'));
      console.log('当前拖拽元素:', element.type, 'ID:', element.data('elementId'));
      
      // 如果悬停的元素与当前拖拽的元素不同，切换到悬停的元素
      if (hoveredElement.value !== element) {
        console.log('🔄 切换到悬停的元素进行拖拽');
        // 先选中悬停的元素
        selectElement(hoveredElement.value);
        targetElement = hoveredElement.value;
      } else {
        console.log('✅ 悬停元素与拖拽元素一致，无需切换');
      }
    } else {
      console.log('ℹ️ 没有悬停元素，使用当前拖拽元素');
    }
    
    // 拖拽开始时，检查当前元素是否被选中
    if (selectedElement.value === targetElement) {
      console.log('✅ dragstart: 拖拽已选中的元素，正常开始拖拽');
    } else {
      // 如果拖拽的不是当前选中的元素，先选中它
      console.log('🎯 dragstart: 拖拽未选中的元素，先选中它');
      selectElement(targetElement);
    }
    
    // 重要：将悬停元素保存到拖拽状态中，防止拖拽过程中丢失
    if (hoveredElement.value && hoveredElement.value === targetElement) {
      targetElement.data('dragFromHover', true);
      console.log('💾 保存悬停状态到拖拽元素');
    }
    
    // 为拖拽中的元素添加特殊的拖拽样式
    targetElement.attr({
      'stroke-width': 4,
      'stroke': '#ff0000', // 红色边框表示正在拖拽
      'stroke-dasharray': '8,4', // 虚线边框
      'fill-opacity': 0.6 // 增加填充透明度
    });
    
    // 设置拖拽状态
    dragging.value = true;
    
    // 重要：拖拽开始时，禁用其他所有元素的拖拽，确保拖拽的一致性
    console.log('🔒 拖拽开始，禁用其他元素拖拽');
    allElements.value.forEach(el => {
      // 安全检查：确保元素有效
      if (!el || !el.node || !document.contains(el.node)) {
        console.warn('⚠️ dragstart: 跳过无效元素');
        return;
      }
      
      if (el !== targetElement) {
        // 禁用其他所有元素的拖拽
        if (el.draggable) {
          el.draggable(false);
          console.log('❌ 禁用元素拖拽:', el.type);
        }
      } else {
        console.log('✅ 保持当前元素拖拽:', el.type);
      }
    });
  });
  
  element.on('dragmove', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragmove: 元素为 null');
      return;
    }
    
    // 拖拽过程中，始终更新当前选中元素的位置
    // 因为拖拽开始时可能已经切换了选中的元素
    if (selectedElement.value) {
      updateResizeHandlesPosition(selectedElement.value);
    }
  });
  
  element.on('dragend', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragend: 元素为 null');
      return;
    }
    
    dragging.value = false;
    // 拖拽结束后确保控制点位置完全同步
    if (selectedElement.value === element) {
      updateResizeHandlesPosition(element);
    }
    // 拖拽结束后，确保当前拖拽的元素被选中
    if (selectedElement.value !== element) {
      selectElement(element);
    }
    
    // 恢复元素的正常选中样式
    if (selectedElement.value === element) {
      selectedElement.value.attr({
        'stroke': '#ff6b6b',
        'stroke-width': 3,
        'stroke-dasharray': '5,5',
        'fill-opacity': 0.2
      });
    }
    
    // 拖拽结束后，恢复所有元素的正常拖拽状态
    restoreNormalDragState();
  });
  
  // 设置元素类型并添加到列表
  currentElement.value.type = 'ellipse';
  currentElement.value.data('elementId', `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`);
  allElements.value.push(currentElement.value);
  
  drawing.value = true;
};

/**
 * 开始绘制多边形
 * @param {{x: number, y: number}} pos - 起始坐标
 */
const startPolygonDrawing = (pos) => {
  currentElement.value = svgDoc.value.polygon([pos.x, pos.y, pos.x + 50, pos.y + 50, pos.x - 50, pos.y + 50]).attr({
    fill: 'rgba(255, 0, 0, 0.1)', // 极淡的红色填充，用于点击检测
        stroke: 'red',
        strokeWidth: 2
  }).draggable().style('cursor', 'move');  // 恢复拖拽功能
  
  // 使用闭包捕获元素引用，避免引用被清空的 currentElement.value
  const element = currentElement.value;
  
  // 使用正确的事件名称绑定拖拽事件
  element.on('dragstart', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragstart: 元素为 null');
      return;
    }
    
    // 重要：优先选择悬停的元素进行拖拽
    let targetElement = element;
    
    // 检查是否有悬停的元素，如果有，优先选择悬停的元素
    if (hoveredElement.value) {
      console.log('🎯 检测到悬停元素，优先选择悬停元素进行拖拽');
      console.log('悬停元素:', hoveredElement.value.type, 'ID:', hoveredElement.value.data('elementId'));
      console.log('当前拖拽元素:', element.type, 'ID:', element.data('elementId'));
      
      // 如果悬停的元素与当前拖拽的元素不同，切换到悬停的元素
      if (hoveredElement.value !== element) {
        console.log('🔄 切换到悬停的元素进行拖拽');
        // 先选中悬停的元素
        selectElement(hoveredElement.value);
        targetElement = hoveredElement.value;
      } else {
        console.log('✅ 悬停元素与拖拽元素一致，无需切换');
      }
    } else {
      console.log('ℹ️ 没有悬停元素，使用当前拖拽元素');
    }
    
    // 拖拽开始时，检查当前元素是否被选中
    if (selectedElement.value === targetElement) {
      console.log('✅ dragstart: 拖拽已选中的元素，正常开始拖拽');
    } else {
      // 如果拖拽的不是当前选中的元素，先选中它
      console.log('🎯 dragstart: 拖拽未选中的元素，先选中它');
      selectElement(targetElement);
    }
    
    // 重要：将悬停元素保存到拖拽状态中，防止拖拽过程中丢失
    if (hoveredElement.value && hoveredElement.value === targetElement) {
      targetElement.data('dragFromHover', true);
      console.log('💾 保存悬停状态到拖拽元素');
    }
    
    // 为拖拽中的元素添加特殊的拖拽样式
    targetElement.attr({
      'stroke-width': 4,
      'stroke': '#ff0000', // 红色边框表示正在拖拽
      'stroke-dasharray': '8,4', // 虚线边框
      'fill-opacity': 0.6 // 增加填充透明度
    });
    
    // 设置拖拽状态
    dragging.value = true;
    
    // 重要：拖拽开始时，禁用其他所有元素的拖拽，确保拖拽的一致性
    console.log('🔒 拖拽开始，禁用其他元素拖拽');
    allElements.value.forEach(el => {
      // 安全检查：确保元素有效
      if (!el || !el.node || !document.contains(el.node)) {
        console.warn('⚠️ dragstart: 跳过无效元素');
        return;
      }
      
      if (el !== targetElement) {
        // 禁用其他所有元素的拖拽
        if (el.draggable) {
          el.draggable(false);
          console.log('❌ 禁用元素拖拽:', el.type);
        }
      } else {
        console.log('✅ 保持当前元素拖拽:', el.type);
      }
    });
  });
  
  element.on('dragmove', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragmove: 元素为 null');
      return;
    }
    
    // 拖拽过程中，始终更新当前选中元素的位置
    // 因为拖拽开始时可能已经切换了选中的元素
    if (selectedElement.value) {
      updateResizeHandlesPosition(selectedElement.value);
    }
  });
  
  element.on('dragend', () => {
    // 安全检查：确保元素存在
    if (!element) {
      console.warn('⚠️ dragend: 元素为 null');
      return;
    }
    
    dragging.value = false;
    // 拖拽结束后确保控制点位置完全同步
    if (selectedElement.value === element) {
      updateResizeHandlesPosition(element);
    }
    // 拖拽结束后，确保当前拖拽的元素被选中
    if (selectedElement.value !== element) {
      selectElement(element);
    }
    
    // 恢复元素的正常选中样式
    if (selectedElement.value === element) {
      selectedElement.value.attr({
        'stroke': '#ff6b6b',
        'stroke-width': 3,
        'stroke-dasharray': '5,5',
        'fill-opacity': 0.2
      });
    }
    
    // 拖拽结束后，恢复所有元素的正常拖拽状态
    restoreNormalDragState();
  });
  
  // 设置元素类型并添加到列表
  currentElement.value.type = 'polygon';
  currentElement.value.data('elementId', `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`);
  allElements.value.push(currentElement.value);
  
  drawing.value = true;
};

/**
 * 结束绘制流程
 */
const stopDrawing = () => {
  // 如果正在拖拽，不结束绘制流程
  if (dragging.value) {
    console.log('⚠️ 正在拖拽中，不结束绘制流程');
    return;
  }
  
  if (currentElement.value) {
    // 确保绘制完成的元素没有控制点
    hideResizeHandles(currentElement.value);
    // debugger
    currentElement.value.data('bbox', null);
  }
  
  drawing.value = false;
  // return
  currentElement.value = null;
  
  // 绘制完成后自动退出绘制模式
  drawingMode.value = false;
};

/**
 * 更新绘制中的形状（鼠标移动时）
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updateDrawingShape = (pos) => {
  if (!drawing.value || !currentElement.value) return;
  
  switch (currentShape.value) {
    case 'rect':
      updateRectDrawing(pos);
      break;
    case 'ellipse':
      updateEllipseDrawing(pos);
      break;
    case 'polygon':
      updatePolygonDrawing(pos);
      break;
  }
};

/**
 * 更新矩形绘制
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updateRectDrawing = (pos) => {
  const width = pos.x - startPoint.value.x;
  const height = pos.y - startPoint.value.y;
  
  // 处理负值尺寸（从任意方向拖拽）
  if (width < 0) {
    currentElement.value.attr({ x: pos.x, width: Math.abs(width) });
  } else {
    currentElement.value.attr({ width: width });
  }
  
  if (height < 0) {
    currentElement.value.attr({ y: pos.y, height: Math.abs(height) });
  } else {
    currentElement.value.attr({ height: height });
  }
};

/**
 * 更新椭圆绘制
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updateEllipseDrawing = (pos) => {
  const rx = Math.abs(pos.x - startPoint.value.x);
  const ry = Math.abs(pos.y - startPoint.value.y);
  currentElement.value.attr({ rx: rx, ry: ry });
};

/**
 * 更新多边形绘制
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updatePolygonDrawing = (pos) => {
  // 多边形保持固定大小，只跟随起始点
  currentElement.value.plot([
    startPoint.value.x, startPoint.value.y,
    startPoint.value.x + 50, startPoint.value.y + 50,
    startPoint.value.x - 50, startPoint.value.y + 50
  ]);
};

// ==================== 元素检测与选择功能 ====================

/**
 * 判断点是否在元素内
 * @param {{x: number, y: number}} pos - 要检测的点坐标
 * @param {Object} element - SVG元素对象
 * @returns {boolean} 是否在元素内
 */
const isPointInElement = (pos, element) => {
  const type = element.type;
  
  switch (type) {
    case 'rect':
      return isPointInRect(pos, element);
    case 'ellipse':
      return isPointInEllipse(pos, element);
    case 'polygon':
      return isPointInPolygon(pos, element);
    default:
      return false;
  }
};

/**
 * 检测点是否在矩形内
 * @param {{x: number, y: number}} pos - 点坐标
 * @param {Object} element - 矩形元素
 * @returns {boolean} 是否在矩形内
 */
const isPointInRect = (pos, element) => {
  const x = element.x();
  const y = element.y();
  const width = element.width();
  const height = element.height();
  
  // 添加容差，让边缘区域也容易被选中
  const tolerance = 2;
  return pos.x >= x - tolerance && 
         pos.x <= x + width + tolerance && 
         pos.y >= y - tolerance && 
         pos.y <= y + height + tolerance;
};

/**
 * 检测点是否在椭圆内
 * @param {{x: number, y: number}} pos - 点坐标
 * @param {Object} element - 椭圆元素
 * @returns {boolean} 是否在椭圆内
 */
const isPointInEllipse = (pos, element) => {
  const cx = element.cx();
  const cy = element.cy();
  const rx = element.rx();
  const ry = element.ry();
  
  // 椭圆检测，添加容差
  const tolerance = 2;
  const dx = (pos.x - cx) / (rx + tolerance);
  const dy = (pos.y - cy) / (ry + tolerance);
  return (dx * dx + dy * dy) <= 1;
};

/**
 * 检测点是否在多边形内
 * @param {{x: number, y: number}} pos - 点坐标
 * @param {Object} element - 多边形元素
 * @returns {boolean} 是否在多边形内
 */
const isPointInPolygon = (pos, element) => {
  const points = element.array();
  if (points.length < 6) return false; // 至少需要3个点
  
  let inside = false;
  // 使用射线法检测点是否在多边形内
  for (let i = 0, j = points.length - 2; i < points.length; i += 2) {
    const xi = points[i];
    const yi = points[i + 1];
    const xj = points[j];
    const yj = points[j + 2];
    
    if (((yi > pos.y) !== (yj > pos.y)) && (pos.x < (xj - xi) * (pos.y - yi) / (yj - yi) + xi)) {
      inside = !inside;
    }
    j = i;
  }
  
  // 如果不在多边形内，检查是否在顶点附近
  if (!inside) {
    const tolerance = 3;
    for (let i = 0; i < points.length; i += 2) {
      const px = points[i];
      const py = points[i + 1];
      const distance = Math.sqrt((pos.x - px) ** 2 + (pos.y - py) ** 2);
      if (distance <= tolerance) {
        return true;
      }
    }
  }
  
  return inside;
};

/**
 * 计算元素面积
 * @param {Object} element - SVG元素对象
 * @returns {number} 面积值
 */
const calculateElementArea = (element) => {
  const type = element.type;
  
  try {
    switch (type) {
      case 'rect':
        const width = Math.max(0, element.width());
        const height = Math.max(0, element.height());
        return width * height;
      case 'ellipse':
        const rx = Math.max(0, element.rx());
        const ry = Math.max(0, element.ry());
        return Math.PI * rx * ry;
      case 'polygon':
        return calculatePolygonArea(element);
      default:
        return 0;
    }
  } catch (error) {
    console.error('计算面积时出错:', error);
    return 0;
  }
};

/**
 * 计算多边形面积（使用鞋带公式）
 * @param {Object} element - 多边形元素
 * @returns {number} 面积值
 */
const calculatePolygonArea = (element) => {
  const points = element.array();
  if (points.length < 6) return 0; // 至少需要3个点
  
  let area = 0;
  for (let i = 0, j = points.length - 2; i < points.length; i += 2) {
    const j = (i + 2) % points.length;
    area += points[i] * points[j + 1];
    area -= points[j] * points[i + 1];
  }
  return Math.abs(area) / 2;
};

/**
 * 在指定位置查找元素（透视层选择）
 * @param {{x: number, y: number}} pos - 查找位置
 * @returns {Object|null} 找到的元素或null
 */
const findElementAtPosition = (pos) => {
  const elementsAtPosition = [];
  
  // 找到所有包含该点的元素
  for (let i = 0; i < allElements.value.length; i++) {
    const element = allElements.value[i];
    if (isPointInElement(pos, element)) {
      const area = calculateElementArea(element);
      elementsAtPosition.push({
        element: element,
        index: i,
        area: area,
        type: element.type
      });
      
      // 调试信息
      // console.log(`找到元素 ${i}: 类型=${element.type}, 面积=${area.toFixed(2)}`);
    }
  }
  
  if (elementsAtPosition.length === 0) {
    // console.log('没有找到任何元素');
    return null;
  }
  
  if (elementsAtPosition.length === 1) {
    // console.log('只找到一个元素，直接返回');
    return elementsAtPosition[0].element;
  }
  
  // 多个元素重叠时，优先选择面积最小的（最精确的标注）
  console.log(`找到 ${elementsAtPosition.length} 个重叠元素，开始智能排序...`);
  
  // 按面积排序，面积越小优先级越高
  elementsAtPosition.sort((a, b) => {
    const areaDiff = a.area - b.area;
    console.log(`比较: ${a.type}(面积${a.area.toFixed(2)}) vs ${b.type}(面积${b.area.toFixed(2)}), 差异=${areaDiff.toFixed(2)}`);
    
    // 面积差异大于5时，按面积排序
    if (Math.abs(areaDiff) > 5) {
      console.log(`面积差异较大，按面积排序`);
      return areaDiff;
    }
    
    // 面积相近时，按绘制顺序排序，后绘制的优先
    console.log(`面积相近，按绘制顺序排序`);
    return b.index - a.index;
  });
  
  const selected = elementsAtPosition[0];
  console.log(`最终选择: ${selected.type}, 面积=${selected.area.toFixed(2)}, 索引=${selected.index}`);
  
  return selected.element;
};

// ==================== 元素选择与状态管理 ====================

/**
 * 选择元素
 * @param {Object} element - 要选择的元素
 */
const selectElement = (element) => {
  // 安全检查：确保传入的元素有效
  if (!element) {
    console.warn('⚠️ selectElement: 传入的元素为 null 或 undefined');
    return;
  }
  
  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn('⚠️ selectElement: element.node 为 null，元素可能已被删除');
    return;
  }
  
  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn('⚠️ selectElement: 元素已不在DOM中');
    return;
  }
  
  // 先全局清理所有残留的控制点
  cleanupAllResizeHandles();
  
  // 清除之前的悬停状态
  if (hoveredElement.value && hoveredElement.value !== element) {
    hoveredElement.value.attr({ 
      stroke: getDefaultStroke(hoveredElement.value),
      strokeWidth: 2,
      'stroke-dasharray': 'none',
      fill: getDefaultFill(hoveredElement.value)
    });
  }
  
  // 清除之前的选择
  if (selectedElement.value) {
    selectedElement.value.attr({ 
      stroke: getDefaultStroke(selectedElement.value),
      strokeWidth: 2,
      'stroke-dasharray': 'none',
      fill: getDefaultFill(selectedElement.value)
    });
  }
  
  // 设置新的选择
  selectedElement.value = element;
  element.attr({ 
    stroke: '#ff6b6b', 
    strokeWidth: 3,
    'stroke-dasharray': '5,5', // 虚线边框
    fill: 'rgba(255, 107, 107, 0.2)' // 淡红色填充
  });
  
  // 将选中的元素移到最上层
  element.front();
  
  // 显示缩放控制点
  showResizeHandles(element);
  
  // 为选中的元素添加拖拽时的控制点同步更新
  if (element.draggable) {
    // 移除之前的拖拽事件监听器
    element.off('drag');
    
    // 添加新的拖拽事件监听器
    element.on('drag', () => {
      // 实时更新控制点位置，跟随元素移动
      updateResizeHandlesPosition(element);
    });
    
    // 添加拖拽结束事件监听器
    element.on('dragend', () => {
      // 拖拽结束后确保控制点位置完全同步
      updateResizeHandlesPosition(element);
    });
  }
  
  // 先清理无效元素
  cleanupInvalidElements();
  
  // 重要：选择元素时，确保所有元素都有拖拽功能，但不设置优先级
  // 拖拽优先级只在拖拽开始时设置
  allElements.value.forEach(el => {
    // 安全检查：确保元素有效
    if (!el || !el.node || !document.contains(el.node)) {
      console.warn('⚠️ selectElement: 跳过无效元素');
      return;
    }
    
    // 确保所有元素都有拖拽功能
    if (!el.draggable) {
      el.draggable();
      console.log('✅ 启用元素拖拽:', el.type);
    }
    // 清除拖拽优先级标记
    el.data('dragPriority', false);
  });
  
  // 清除悬停状态
  hoveredElement.value = null;
};

/**
 * 清除所有选择
 */
const clearSelection = () => {
  // 清除悬停状态
  if (hoveredElement.value) {
    try {
      hoveredElement.value.attr({ 
        stroke: getDefaultStroke(hoveredElement.value),
        strokeWidth: 2,
        'stroke-dasharray': 'none',
        fill: getDefaultFill(hoveredElement.value)
      });
    } catch (error) {
      console.warn('⚠️ clearSelection: 清除悬停状态时出错:', error);
    }
    hoveredElement.value = null;
  }
  
  // 清除选中状态
  if (selectedElement.value) {
    try {
      selectedElement.value.attr({ 
        stroke: getDefaultStroke(selectedElement.value),
        strokeWidth: 2,
        'stroke-dasharray': 'none',
        fill: getDefaultFill(selectedElement.value)
      });
      
      // 移除拖拽事件监听器
      if (selectedElement.value.off) {
        selectedElement.value.off('drag');
      }
    } catch (error) {
      console.warn('⚠️ clearSelection: 清除选中状态时出错:', error);
    }
    
    selectedElement.value = null;
  }
  
  // 全局清理所有控制点
  cleanupAllResizeHandles();
  
  // 恢复所有元素的正常拖拽状态
  restoreNormalDragState();
};

// ==================== 事件处理函数 ====================

/**
 * 检测是否点击在调整大小的控制点上
 * @param {MouseEvent} event - 鼠标事件
 * @returns {boolean} 是否点击在控制点上
 */
const isClickingOnResizeHandle = (event) => {
  const target = event.target;
  
  // 检查是否点击在调整大小的控制点上
  // 检查SVG.js的resize插件控制点
  if (target.classList && target.classList.contains('svg-resize-handle')) {
    return true;
  }
  
  // 检查我们自定义的控制点
  if (target.nodeName === 'rect' && target.getAttribute('fill') === '#ffffff') {
    return true;
  }
  
  // 检查是否有resize-handle类
  if (target.classList && target.classList.contains('resize-handle')) {
    return true;
  }
  
  // 检查父元素是否有resize-handle类
  let parent = target.parentElement;
  while (parent) {
    if (parent.classList && parent.classList.contains('resize-handle')) {
      return true;
    }
    parent = parent.parentElement;
  }
  
  return false;
};

/**
 * 处理点击事件 - 透视层选择
 * @param {MouseEvent} event - 点击事件
 */
const handleClick = (event) => {
  if (drawing.value || dragging.value) return; // 如果正在绘制或拖拽，不处理点击选择
  // 拖拽过程中完全禁用选择逻辑，确保拖拽的连续性
  
  // 如果点击在调整大小的控制点上，不处理选择逻辑
  if (isClickingOnResizeHandle(event)) {
    return;
  }
  
  // 如果点击在SVG画布上但没有元素，清除选择
  const pos = getMousePosition(event);
  const clickedElement = findElementAtPosition(pos);
  
  // 只有当点击在元素上时才选择，避免空点击生成控制点
  if (clickedElement && clickedElement !== selectedElement.value) {
    console.log('clickedElement--',clickedElement);
    
    selectElement(clickedElement);
    
    // 先清理无效元素
    cleanupInvalidElements();
    
    // 重要：点击选择时，确保所有元素都有拖拽功能，但不设置优先级
    // 拖拽优先级只在拖拽开始时设置
    allElements.value.forEach(el => {
      // 安全检查：确保元素有效
      if (!el || !el.node || !document.contains(el.node)) {
        console.warn('⚠️ handleClick: 跳过无效元素');
        return;
      }
      
      // 确保所有元素都有拖拽功能
      if (!el.draggable) {
        el.draggable();
        console.log('✅ 启用元素拖拽:', el.type);
      }
      // 清除拖拽优先级标记
      el.data('dragPriority', false);
    });
  } else if (!clickedElement) {
    clearSelection();
  }
};

/**
 * 鼠标移动事件处理
 * @param {MouseEvent} event - 鼠标移动事件
 */
const onMouseMove = (event) => {
  const pos = getMousePosition(event);
  
  // 跟踪全局鼠标位置，用于快捷键检测
  window.mouseX = event.clientX;
  window.mouseY = event.clientY;
  
  // 处理绘制模式
  if (drawing.value && currentElement.value) {
    updateDrawingShape(pos);
    return; // 绘制模式下不处理悬停预览
  }
  
  // 处理拖拽模式下的实时选中
  if (dragging.value) {
    handleDragSelection(pos);
    return; // 拖拽模式下不处理悬停预览
  }
  
  // 处理悬停预览（非绘制模式且非拖拽模式）
  if (!drawing.value && !dragging.value) {
    handleHoverPreview(pos);
  }
};

/**
 * 处理拖拽过程中的实时选中
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const handleDragSelection = (pos) => {
  // 在拖拽过程中，保持当前选中元素的选中状态
  // 不因为鼠标经过其他元素而改变选择，确保拖拽的连续性
  if (selectedElement.value) {
    // 只更新当前选中元素的控制点位置
    updateResizeHandlesPosition(selectedElement.value);
  }
};

/**
 * 处理悬停预览
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const handleHoverPreview = (pos) => {
  // 如果正在拖拽或调整大小，不处理悬停效果
  // 拖拽过程中保持当前选择状态，不显示悬停效果
  if (dragging.value) return;
  
  // 检查鼠标位置是否发生显著变化
  const distance = Math.sqrt((pos.x - lastMousePos.value.x) ** 2 + (pos.y - lastMousePos.value.y) ** 2);
  if (distance < 2) return; // 鼠标移动距离太小，不更新预览
  
  lastMousePos.value = pos;
  
  const element = findElementAtPosition(pos);
  element.front();
  
  // 清除之前的悬停状态
  if (hoveredElement.value && hoveredElement.value !== element) {
    // 如果之前悬停的元素是当前选中的元素，恢复选中状态
    if (hoveredElement.value === selectedElement.value) {
      hoveredElement.value.attr({ 
        stroke: '#ff6b6b', 
        strokeWidth: 3,
        'stroke-dasharray': '5,5',
        fill: 'rgba(255, 107, 107, 0.2)'
      });
    } else {
      // 否则恢复默认状态
      hoveredElement.value.attr({ 
        stroke: getDefaultStroke(hoveredElement.value),
        strokeWidth: 2,
        'stroke-dasharray': 'none',
        fill: getDefaultFill(hoveredElement.value)
      });
    }
    
    // 重要：移出时不恢复拖拽状态，保持当前状态
    console.log('🔄 移出元素，保持拖拽状态');
  }
  
  // 设置新的悬停状态
  if (element && element !== selectedElement.value) {
    if (hoveredElement.value !== element) {
      hoveredElement.value = element;
      element.attr({ 
        stroke: '#ffa500', // 橙色悬停边框
        strokeWidth: 2,
        'stroke-dasharray': 'none',
        fill: 'rgba(255, 165, 0, 0.1)' // 淡橙色悬停填充
      });
      
      // 重要：悬停时只做预览，不改变拖拽状态
      prepareElementForDrag(element);
    }
  } else if (element && element === selectedElement.value) {
    // 如果悬停的是当前选中的元素，显示悬停效果（覆盖选中状态）
    if (hoveredElement.value !== element) {
      hoveredElement.value = element;
      element.attr({ 
        stroke: '#ffa500', // 橙色悬停边框
        strokeWidth: 3, // 保持选中状态的粗细
        'stroke-dasharray': 'none', // 覆盖虚线为实线
        fill: 'rgba(255, 165, 0, 0.2)' // 橙色悬停填充
      });
    }
  } else {
    // 如果没有悬停任何元素，不清除拖拽状态
    console.log('🔄 无悬停元素，保持拖拽状态');
    hoveredElement.value = null;
  }
};

// ==================== 调试工具函数 ====================

/**
 * 调试：显示当前控制点状态
 */
const debugResizeHandles = () => {
  console.log('=== 控制点调试信息 ===');
  console.log('当前选中元素:', selectedElement.value);
  if (selectedElement.value) {
    const handleCount = selectedElement.value.data('resizeHandlesCount');
    console.log('控制点数量:', handleCount || 0);
    console.log('边界框数据:', selectedElement.value.data('bbox'));
    
    // 检查全局管理器中的控制点
    const handles = window.resizeHandlesManager?.get(selectedElement.value.data('elementId'));
    console.log('全局管理器中的控制点:', handles);
    
    // 检查DOM中的实际控制点
    const svgElement = selectedElement.value.node;
    if (svgElement && svgElement.parentNode) {
      const parent = svgElement.parentNode;
      const actualHandles = parent.querySelectorAll('.resize-handle');
      console.log('DOM中实际控制点数量:', actualHandles.length);
      
      // 显示每个控制点的位置和属性
      actualHandles.forEach((handle, index) => {
        const rect = handle.getBoundingClientRect();
        const handleIndex = handle.getAttribute('data-handle-index');
        const elementId = handle.getAttribute('data-element-id');
        console.log(`控制点 ${index}: x=${rect.x}, y=${rect.y}, handleIndex=${handleIndex}, elementId=${elementId}`);
      });
    }
  }
  
  // 检查所有元素的控制点状态
  console.log('所有元素的控制点状态:');
  allElements.value.forEach((element, index) => {
    const handleCount = element.data('resizeHandlesCount');
    console.log(`元素 ${index}: 类型=${element.type}, 控制点数量=${handleCount || 0}, elementId=${element.data('elementId')}`);
  });
  
  // 检查循环引用
  console.log('=== 循环引用检查 ===');
  try {
    if (selectedElement.value) {
      const testData = {
        type: selectedElement.value.type,
        bbox: selectedElement.value.data('bbox'),
        handlesCount: selectedElement.value.data('resizeHandlesCount') || 0
      };
      console.log('测试数据序列化:', JSON.stringify(testData));
      console.log('✅ 无循环引用问题');
    }
  } catch (error) {
    console.error('❌ 检测到循环引用:', error.message);
  }
};

/**
 * 测试控制点功能
 */
const testResizeHandles = () => {
  console.log('🧪 测试控制点功能');
  
  if (!selectedElement.value) {
    console.log('❌ 没有选中的元素');
    return;
  }
  
  const element = selectedElement.value;
  console.log('✅ 当前选中元素:', element.type);
  
  // 测试控制点是否存在
  const handles = window.resizeHandlesManager?.get(element.data('elementId'));
  if (handles && handles.length > 0) {
    console.log('✅ 控制点存在，数量:', handles.length);
    
    // 测试拖拽功能
    handles.forEach((handle, index) => {
      console.log(`控制点 ${index}:`, {
        draggable: !!handle.draggable,
        x: handle.x(),
        y: handle.y()
      });
    });
  } else {
    console.log('❌ 控制点不存在');
  }
  
  // 测试边界框数据
  const bbox = element.data('bbox');
  if (bbox) {
    console.log('✅ 边界框数据:', bbox);
  } else {
    console.log('❌ 边界框数据不存在');
  }
};

/**
 * 调试拖拽状态管理
 */
const debugDragState = () => {
  console.log('=== 拖拽状态调试信息 ===');
  console.log('当前选中元素:', selectedElement.value);
  console.log('当前悬停元素:', hoveredElement.value);
  console.log('拖拽状态:', dragging.value);
  console.log('绘制状态:', drawing.value);
  
  // 检查所有元素的拖拽状态
  console.log('所有元素的拖拽状态:');
  allElements.value.forEach((element, index) => {
    const dragPriority = element.data('dragPriority');
    const isDraggable = !!element.draggable;
    const hasDraggableMethod = typeof element.draggable === 'function';
    console.log(`元素 ${index}: 类型=${element.type}, 拖拽优先级=${dragPriority}, 可拖拽=${isDraggable}, 有拖拽方法=${hasDraggableMethod}`);
  });
  
  // 检查当前选中元素的拖拽优先级
  if (selectedElement.value) {
    const dragPriority = selectedElement.value.data('dragPriority');
    const isDraggable = !!selectedElement.value.draggable;
    console.log('当前选中元素:', {
      type: selectedElement.value.type,
      dragPriority: dragPriority,
      isDraggable: isDraggable,
      hasDraggableMethod: typeof selectedElement.value.draggable === 'function'
    });
  }
  
  // 检查当前悬停元素的拖拽优先级
  if (hoveredElement.value) {
    const dragPriority = hoveredElement.value.data('dragPriority');
    const isDraggable = !!hoveredElement.value.draggable;
    console.log('当前悬停元素:', {
      type: hoveredElement.value.type,
      dragPriority: dragPriority,
      isDraggable: isDraggable,
      hasDraggableMethod: typeof hoveredElement.value.draggable === 'function'
    });
  }
};

/**
 * 退出绘制模式
 */
const exitDrawingMode = () => {
  // 如果正在拖拽，不退出绘制模式
  if (dragging.value) {
    console.log('⚠️ 正在拖拽中，不退出绘制模式');
    return;
  }
  
  drawingMode.value = false;
  drawing.value = false;
  if (currentElement.value) {
    // 如果正在绘制，取消当前绘制
    currentElement.value.remove();
    currentElement.value = null;
  }
  console.log('✅ 已退出绘制模式');
};

/**
 * 添加键盘事件监听器
 */
const addKeyboardListeners = () => {
  // 监听键盘按下事件
  document.addEventListener('keydown', (event) => {
    // 如果正在绘制或拖拽，不处理快捷键
    if (drawing.value || dragging.value) return;
    
    // 检查是否在SVG画布区域内
    if (!isMouseInSVGCanvas()) return;
    
    switch (event.key.toLowerCase()) {
      case 'r': // R键绘制矩形
        event.preventDefault();
        // console.log('🎨 快捷键R：进入矩形绘制模式');
        selectShape('rect');
        break;
      case 'e': // E键绘制椭圆
        event.preventDefault();
        console.log('🎨 快捷键E：进入椭圆绘制模式');
        selectShape('ellipse');
        break;
      case 'p': // P键绘制多边形
        event.preventDefault();
        console.log('🎨 快捷键P：进入多边形绘制模式');
        selectShape('polygon');
        break;
      case 'escape': // ESC键退出绘制模式
        event.preventDefault();
        console.log('🚪 快捷键ESC：退出绘制模式');
        exitDrawingMode();
        break;
      case 'space': // 空格键测试拖动
        event.preventDefault();
        console.log('🧪 快捷键空格：测试拖动');
        testPanning();
        break;
    }
  });
  
  // 监听键盘松开事件
  document.addEventListener('keyup', (event) => {
    // 如果不在绘制模式，不处理
    if (!drawingMode.value) return;
    
    switch (event.key.toLowerCase()) {
      case 'r':
      case 'e':
      case 'p':
        // 松开快捷键后自动退出绘制模式
        console.log('🔓 松开快捷键，自动退出绘制模式');
        exitDrawingMode();
        break;
    }
  });
  
  // 监听鼠标按下事件，用于快捷键绘制
  document.addEventListener('mousedown', (event) => {
    // 如果不在绘制模式，不处理
    if (!drawingMode.value) return;
    
    // 检查是否在SVG画布区域内
    if (!isMouseInSVGCanvas()) return;
    
    // 如果按住快捷键，直接开始绘制
    if (event.buttons === 1) { // 左键按下
      console.log('🎨 快捷键绘制：开始绘制', currentShape.value);
      const pos = getMousePosition(event);
      startDrawingFromKeyboard(pos);
    }
  });
};

/**
 * 检查鼠标是否在SVG画布区域内
 */
const isMouseInSVGCanvas = () => {
  if (!svgCanvas.value) return false;
  
  const rect = svgCanvas.value.getBoundingClientRect();
  const mouseX = window.mouseX || 0; // 需要跟踪鼠标位置
  const mouseY = window.mouseY || 0;
  
  return mouseX >= rect.left && mouseX <= rect.right && 
         mouseY >= rect.top && mouseY <= rect.bottom;
};

/**
 * 从快捷键开始绘制
 */
const startDrawingFromKeyboard = (pos) => {
  if (!drawingMode.value) return;
  
  startPoint.value = pos;
  
  switch (currentShape.value) {
    case 'rect':
      startRectDrawing(pos);
      break;
    case 'ellipse':
      startEllipseDrawing(pos);
      break;
    case 'polygon':
      startPolygonDrawing(pos);
      break;
  }
};

/**
 * 应用视口变换
 */
const applyViewportTransform = () => {
  if (!svgDoc.value) return;
  
  const svgElement = svgDoc.value.node;
  svgElement.style.transform = `translate(${viewport.value.translateX}px, ${viewport.value.translateY}px) scale(${viewport.value.scale})`;
  svgElement.style.transformOrigin = '0 0';
  
  // 添加过渡效果，使缩放更平滑
  svgElement.style.transition = 'transform 0.1s ease-out';
  
  console.log('🔍 应用视口变换:', {
    scale: viewport.value.scale,
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY
  });
};

/**
 * 处理滚轮缩放
 */
const handleWheel = (event) => {
  event.preventDefault();
  
  if (!svgCanvas.value) return;
  
  const rect = svgCanvas.value.getBoundingClientRect();
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;
  
  // 计算缩放中心点（相对于SVG）
  const centerX = (mouseX - viewport.value.translateX) / viewport.value.scale;
  const centerY = (mouseY - viewport.value.translateY) / viewport.value.scale;
  
  // 计算缩放因子
  const delta = event.deltaY > 0 ? 0.9 : 1.1;
  const newScale = Math.max(
    viewport.value.minScale,
    Math.min(viewport.value.maxScale, viewport.value.scale * delta)
  );
  
  // 计算新的偏移量，保持鼠标位置不变
  const scaleRatio = newScale / viewport.value.scale;
  viewport.value.translateX = mouseX - centerX * newScale;
  viewport.value.translateY = mouseY - centerY * newScale;
  viewport.value.scale = newScale;
  
  // 应用边界限制，防止内容完全移出可视区域
  applyBoundaryConstraints();
  
  // 应用变换
  applyViewportTransform();
  
  // 更新控制点位置
  if (selectedElement.value) {
    updateResizeHandlesPosition(selectedElement.value);
  }
  
  console.log('🔍 缩放:', { scale: newScale, translateX: viewport.value.translateX, translateY: viewport.value.translateY });
};

/**
 * 开始拖动画布
 */
const startPanning = (event) => {
  console.log('🎯 startPanning 被调用');
  
  if (drawing.value || drawingMode.value) {
    console.log('❌ 绘制模式下不允许拖动');
    return;
  }
  
  viewport.value.isPanning = true;
  viewport.value.lastPanPoint = { x: event.clientX, y: event.clientY };
  
  console.log('✅ 拖动状态已设置:', {
    isPanning: viewport.value.isPanning,
    lastPoint: viewport.value.lastPanPoint
  });
  
  // 改变鼠标样式
  if (svgCanvas.value) {
    svgCanvas.value.style.cursor = 'grabbing';
  }
  
  // 添加全局事件监听器
  document.addEventListener('mousemove', panCanvas);
  document.addEventListener('mouseup', stopPanning);
};

/**
 * 拖动画布
 */
const panCanvas = (event) => {
  if (!viewport.value.isPanning) {
    console.log('❌ 不在拖动状态');
    return;
  }
  
  const deltaX = event.clientX - viewport.value.lastPanPoint.x;
  const deltaY = event.clientY - viewport.value.lastPanPoint.y;
  
  console.log('🔄 拖动中:', { deltaX, deltaY, clientX: event.clientX, clientY: event.clientY });
  
  viewport.value.translateX += deltaX;
  viewport.value.translateY += deltaY;
  viewport.value.lastPanPoint = { x: event.clientX, y: event.clientY };
  
  // 应用边界限制
  applyBoundaryConstraints();
  
  // 应用变换
  applyViewportTransform();
  
  // 更新控制点位置
  if (selectedElement.value) {
    updateResizeHandlesPosition(selectedElement.value);
  }
};

/**
 * 停止拖动画布
 */
const stopPanning = () => {
  console.log('🛑 stopPanning 被调用');
  
  viewport.value.isPanning = false;
  
  // 恢复鼠标样式
  if (svgCanvas.value) {
    svgCanvas.value.style.cursor = 'default';
  }
  
  // 移除全局事件监听器
  document.removeEventListener('mousemove', panCanvas);
  document.removeEventListener('mouseup', stopPanning);
  
  console.log('✅ 拖动已停止，事件监听器已移除');
};

/**
 * 应用边界限制，防止内容完全移出可视区域
 */
const applyBoundaryConstraints = () => {
  if (!svgCanvas.value) return;
  
  const containerWidth = 800; // 容器宽度
  const containerHeight = 600; // 容器高度
  const svgWidth = 800; // SVG原始宽度
  const svgHeight = 600; // SVG原始高度
  
  // 计算缩放后的SVG尺寸
  const scaledWidth = svgWidth * viewport.value.scale;
  const scaledHeight = svgHeight * viewport.value.scale;
  
  // 限制X轴偏移，确保至少有一部分内容可见
  const maxTranslateX = containerWidth * 0.1; // 允许10%的内容移出
  const minTranslateX = -(scaledWidth - containerWidth * 0.9); // 允许10%的内容移出
  
  viewport.value.translateX = Math.max(minTranslateX, Math.min(maxTranslateX, viewport.value.translateX));
  
  // 限制Y轴偏移
  const maxTranslateY = containerHeight * 0.1;
  const minTranslateY = -(scaledHeight - containerHeight * 0.9);
  
  viewport.value.translateY = Math.max(minTranslateY, Math.min(maxTranslateY, viewport.value.translateY));
  
  console.log('🔒 应用边界限制:', {
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY,
    scaledWidth,
    scaledHeight
  });
};

/**
 * 重置视口
 */
const resetViewport = () => {
  viewport.value.scale = 1;
  viewport.value.translateX = 0;
  viewport.value.translateY = 0;
  viewport.value.isPanning = false;
  
  applyViewportTransform();
  
  // 更新控制点位置
  if (selectedElement.value) {
    updateResizeHandlesPosition(selectedElement.value);
  }
  
  console.log('🔄 视口已重置');
};

/**
 * 测试拖动功能
 */
const testPanning = () => {
  console.log('🧪 测试拖动功能');
  console.log('当前状态:', {
    drawing: drawing.value,
    drawingMode: drawingMode.value,
    isPanning: viewport.value.isPanning,
    scale: viewport.value.scale,
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY
  });
  
  // 模拟拖动
  viewport.value.translateX += 50;
  viewport.value.translateY += 50;
  applyViewportTransform();
  console.log('✅ 测试拖动完成，视口已移动');
};

/**
 * 鼠标按下事件处理
 */
const onMouseDown = (event) => {
  console.log('按下了', event.button);
  
  // 中键或右键拖动画布
  if (event.button === 1 || event.button === 2) {
    event.preventDefault();
    console.log('🚀 开始拖动画布');
    startPanning(event);
    return;
  }
  
  // 左键绘制
  if (event.button === 0 && drawingMode.value) {
    startDrawing(event);
  }
};

/**
 * 鼠标松开事件处理
 */
const onMouseUp = (event) => {
  console.log('鼠标松开了', event.button);
  
  // 停止拖动画布
  if (viewport.value.isPanning) {
    console.log('🛑 在onMouseUp中停止拖动');
    stopPanning();
    return;
  }
  
  // 停止绘制
  if (drawing.value) {
    stopDrawing(event);
  }
};

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的初始化
 */
onMounted(() => {
  // 验证SVG.js插件加载状态
  validateSVGPlugins();
  
  svgDoc.value = SVG(svgCanvas.value);
  
  // 初始化视口变换
  applyViewportTransform();
  
  // 添加键盘事件监听器
  addKeyboardListeners();
  
  // 添加SVG画布的mousedown事件监听器，实现智能拖拽切换
  addSVGMouseDownListener();
  
  // 添加调试功能到全局
  window.debugResizeHandles = debugResizeHandles;
  
  // 添加拖拽选择优化功能到全局
  window.optimizeDragSelection = optimizeDragSelection;
  
  // 启动定期清理无效元素的定时器
  const cleanupInterval = setInterval(() => {
    cleanupInvalidElements();
  }, 5000); // 每5秒清理一次
  
  // 在组件卸载时清理定时器
});
onUnmounted(() => {
  clearInterval(cleanupInterval);
});

/**
 * 添加SVG画布的mousedown事件监听器
 * 实现智能拖拽切换：在鼠标按下的那一刻就立即锁定交互状态
 */
const addSVGMouseDownListener = () => {
  if (!svgCanvas.value) return;
  
  svgCanvas.value.addEventListener('mousedown', (event) => {
    // 如果不在绘制模式，不处理
    if (drawingMode.value) return;
    
    // 只处理左键点击
    if (event.button !== 0) return;
    
    // 获取鼠标位置下的元素
    const pos = getMousePosition(event);
    const elementAtMouse = findElementAtPosition(pos);
    
    if (elementAtMouse) {
      console.log('🎯 mousedown: 检测到鼠标下的元素，立即锁定交互状态');
      
      // 立即清除之前的选择
      if (selectedElement.value && selectedElement.value !== elementAtMouse) {
        clearSelection();
      }
      
      // 立即选择鼠标下的元素
      selectElement(elementAtMouse);
      
      // 先清理无效元素
      cleanupInvalidElements();
      
      // 重要：mousedown时，确保所有元素都有拖拽功能，但不设置优先级
      // 拖拽优先级只在拖拽开始时设置
      allElements.value.forEach(element => {
        // 安全检查：确保元素有效
        if (!element || !element.node || !document.contains(element.node)) {
          console.warn('⚠️ addSVGMouseDownListener: 跳过无效元素');
          return;
        }
        
        // 确保所有元素都有拖拽功能
        if (!element.draggable) {
          element.draggable();
          console.log('✅ 启用元素拖拽:', element.type);
        }
        // 清除拖拽优先级标记
        element.data('dragPriority', false);
      });
      
      // 设置交互锁定状态，防止其他元素干扰
      dragging.value = true;
      
      console.log('✅ mousedown: 交互状态已锁定到:', elementAtMouse.type);
    }
  });
};

/**
 * 优化拖拽过程中的选择状态
 * 确保拖拽的元素始终被正确选中
 */
const optimizeDragSelection = () => {
  if (dragging.value && currentElement.value) {
    // 如果正在拖拽且当前元素存在，确保它被选中
    if (selectedElement.value !== currentElement.value) {
      selectElement(currentElement.value);
    }
  }
};
</script>

<style scoped>
.annotation-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.svg-container {
  position: relative;
  width: 800px;
  height: 600px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease;
}

.svg-container:hover {
  /* border-color: #007bff; */
}

.svg-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

.controls {
  margin-top: 10px;
}

button {
  margin-right: 10px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* SVG调整大小控制点的鼠标样式 */
:deep(.svg-resize-handle) {
  cursor: pointer;
}

/* 角落控制点 - 对角线调整 */
:deep(.svg-resize-handle.nw) {
  cursor: nw-resize;
}

:deep(.svg-resize-handle.ne) {
  cursor: ne-resize;
}

:deep(.svg-resize-handle.sw) {
  cursor: sw-resize;
}

:deep(.svg-resize-handle.se) {
  cursor: se-resize;
}

/* 边缘控制点 - 单向调整 */
:deep(.svg-resize-handle.n) {
  cursor: n-resize;
}

:deep(.svg-resize-handle.s) {
  cursor: s-resize;
}

:deep(.svg-resize-handle.e) {
  cursor: e-resize;
}

:deep(.svg-resize-handle.w) {
  cursor: w-resize;
}

/* 拖拽时的鼠标样式 */
:deep(.svg-draggable) {
  cursor: move;
}

/* 选中状态下的鼠标样式 */
:deep(.svg-selected) {
  cursor: default;
}

/* 悬停状态下的鼠标样式 */
:deep(.svg-hover) {
  cursor: pointer;
}

/* 自定义缩放控制点样式 */
.resize-handle {
  pointer-events: all;
  z-index: 1000;
}

.resize-handle:hover {
  fill: #ff6b6b !important;
  stroke: #ff6b6b !important;
}

/* 快捷键信息样式 */
.shortcuts-info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  border: 1px solid #e9ecef;
}

.shortcuts-info p {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
}

.shortcuts-info kbd {
  background-color: #e9ecef;
  border: 1px solid #adb5bd;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  font-family: monospace;
}

.reset-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
}

.reset-btn:hover {
  background-color: #0056b3;
}
</style>
